<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3">aaa</div>
	</body>
</html>
<style type="text/css">
	.box1{
		width: 200px;
		height: 200px;
		background-color: #0000FF;
		margin: 200px auto 0 auto;
		/* 变形指通过css改变元素形状的位置
		 变形不会影响到页面布局*/
		/* translateX()向x轴平移 translateY()向y轴平移 translateZ()向z轴平移 */
		/* 平移元素时百分比相对于自身计算 */
		transform: translatex(50%);
	}
	.box2{
		width: 200px;
		height: 200px;
		background-color: #000000;
		margin: 0 auto;
	}
	/* 未设置宽高的元素transform实现居中 */
	.box3{
		position: absolute;
		background-color: orange;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	/* z轴平移 正常情况下调整元素和人眼之间的距离*/
	/* z轴立体效果近大远小，默认情况下不支持透视，如果要看见效果，必须设置网页视距 */
	html{
		/* 设置当前网页视距800px */
		perspective: 800px;
	}
	.box2:hover{
		transform: translateZ(100px);
	}
</style>
